// pages/colorpad/colorpad.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    color: "#000000", //前景色 
    bgcolor: "#ffffff", //背景色 
    red: '0',
    green: '0',
    blue: '0',
    hexLabel: "使用十六进制颜色值"
  },
  isHex: true, //十六进制颜色值开关
  cmap: {
    'r': 'red',
    'g': 'green',
    'b': 'blue'
  },
  toHex(num) {
    var str = ""
    if (num < 16) {
      str = "0" + num.toString(16)
    } else {
      str = num.toString(16)
    }
    return str
  },

  setColor: function () {
    var rr = this.data.red //获取前景色红色分量 
    var gg = this.data.green //获取前景色绿色分量 
    var bb = this.data.blue //获取前景色蓝色分量 
    var dark = (Number(rr) + Number(gg) + Number(bb)) < 383 //判断前景色亮度 
    var str = ""
    if (this.isHex) { //若十六进制开关打开，设置前景色为#rrggbb 十六进制格式 
      str = "#" + this.toHex(Number(rr)) + this.toHex(Number(gg)) + this.toHex(Number(bb))
      this.setData({
        color: str
      })
    } else {
      //若十六进制开关关闭，设置前景色为 rgb(r,g,b)十进制格式 
      str = "rgb(" + rr + "," + gg + "," + bb + ")"
      this.setData({
        color: str
      })
    }
    if (dark) { //根据前景色亮度设置背景色为黑色或者白色 
      this.setData({
        bgcolor: "#ffffff"
      })
    } else {
      this.setData({
        bgcolor: "#000000"
      })
    }
  },
  sliderChange: function (e) {
    var rgb = e.target.dataset.val
    var key = this.cmap[rgb]
    this.setData({
      [key]: e.detail.value
    })
    this.setColor()
    // if (rgb === 'r') {
    //   this.setData({
    //     red: e.detail.value
    //   })
    //   this.setColor()
    // } else if (rgb === 'g') {
    //   this.setData({
    //     green: e.detail.value
    //   })
    //   this.setColor()
    // } else if (rgb === 'b') {
    //   this.setData({
    //     blue: e.detail.value
    //   })
    //   this.setColor()
    // }
  },
  numBtn: function (e) {
    var step = e.target.dataset.val
    var key = this.cmap[step[0]]
    var op = Number(step.slice(1, 3))
    var num = this.data[key] + op
    if (num < 0) {
      num = 0
    } else if (num > 255) {
      num = 255
    }
    this.setData({
      [key]: num
    })
    // console.log(num)
    // // console.log(op)
    // if (step === 'r-1') {
    //   if (this.data.red <= 1) {
    //     this.setData({
    //       red: 0
    //     })
    //   } else {
    //     this.setData({
    //       red: this.data.red - 1
    //     })
    //   }
    // } else if (step === 'r+1') {
    //   if (this.data.red >= 254) {
    //     this.setData({
    //       red: 255
    //     })
    //   } else {
    //     this.setData({
    //       red: Number(this.data.red) + 1
    //     })
    //   }
    // } else if (step === 'g-1') {
    //   if (this.data.green <= 1) {
    //     this.setData({
    //       green: 0
    //     })
    //   } else {
    //     this.setData({
    //       green: this.data.green - 1
    //     })
    //   }
    // } else if (step === 'g+1') {
    //   if (this.data.green >= 254) {
    //     this.setData({
    //       green: 255
    //     })
    //   } else {
    //     this.setData({
    //       green: Number(this.data.green) + 1
    //     })
    //   }
    // } else if (step === 'b-1') {
    //   if (this.data.blue <= 1) {
    //     this.setData({
    //       blue: 0
    //     })
    //   } else {
    //     this.setData({
    //       blue: this.data.blue - 1
    //     })
    //   }
    // } else if (step === 'b+1') {
    //   if (this.data.blue >= 254) {
    //     this.setData({
    //       blue: 255
    //     })
    //   } else {
    //     this.setData({
    //       blue: Number(this.data.blue) + 1
    //     })
    //   }
    // }
    this.setColor()
  },
  switchChange: function (e) {
    if (e.detail.value) {
      this.isHex = true
      //刷新颜色值函数
      this.setColor()
      this.setData({
        hexLabel: "使用十六进制颜色值"
      })
    } else {
      this.isHex = false
      //刷新颜色值函数
      this.setColor()
      this.setData({
        hexLabel: "使用十进制颜色值"
      })
    }
  },
})